<template>
  <div class="h-full flex flex-col p-6 bg-gray-50">
    <h2 class="text-2xl font-bold mb-6">文件类型设置</h2>
    <div class="flex-1 overflow-y-auto space-y-6">
      <div v-for="(exts, type) in fileTypes" :key="type" class="bg-white p-4 rounded-lg shadow">
        <h3 class="text-lg font-semibold mb-2">{{ typeLabels[type] }}扩展名</h3>
        <input 
          v-model="fileTypes[type]" 
          type="text" 
          class="w-full p-2 border rounded" 
          placeholder="用逗号分隔扩展名，例如: jpg,png,gif"
        />
      </div>
    </div>
    <div class="mt-4 flex justify-end space-x-4">
      <button @click="resetToDefaults" class="px-4 py-2 bg-gray-300 rounded">重置默认</button>
      <button @click="saveSettings" class="px-4 py-2 bg-blue-500 text-white rounded">保存设置</button>
      <button @click="$emit('navigate', 'settings')" class="px-4 py-2 bg-green-500 text-white rounded">返回配置</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const typeLabels = {
  images: '图片',
  videos: '视频',
  audios: '音频',
  documents: '文档',
  archives: '压缩文件'
}

const defaultFileTypes = {
  images: 'jpg,jpeg,png,gif,bmp,tiff,webp',
  videos: 'mp4,avi,mkv,mov,wmv,flv',
  audios: 'mp3,wav,ogg,flac,aac',
  documents: 'pdf,doc,docx,txt,rtf,xls,xlsx,ppt,pptx',
  archives: 'zip,rar,7z,tar,gz'
}

const fileTypes = ref({ ...defaultFileTypes })

onMounted(() => {
  const saved = localStorage.getItem('fileTypeSettings')
  if (saved) {
    fileTypes.value = JSON.parse(saved)
  }
})

const saveSettings = () => {
  localStorage.setItem('fileTypeSettings', JSON.stringify(fileTypes.value))
  alert('设置已保存')
}

const resetToDefaults = () => {
  fileTypes.value = { ...defaultFileTypes }
  saveSettings()
}
</script>
